<!DOCTYPE html>
<html>
	{include file="public1/_header" /}
	<style>

		/** 应用列表样式 */
		.application-list-item {
			background-color: #fff;
			border: 1px solid #e8e8e8;
			border-radius: 4px;
			cursor: pointer;
			transition: all .2s;
		}

		.application-list-item:hover {
			box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
		}

		.application-list-item .application-list-item-header {
			padding: 16px 12px 0 12px;
		}

		.application-list-item .application-list-item-header .head {
			width: 25px;
			height: 25px;
			border-radius: 50%;
			margin-right: 10px;
		}

		.application-list-item .application-list-item-header > h2 {
			color: #333;
			font-size: 18px;
			display: inline-block;
		}

		.application-list-item .application-list-item-body {
			padding: 12px 12px 12px 15px;
			font-size: 0;
		}

		.application-list-item .application-list-item-body .text-num-item {
			font-size: 26px;
			color: #666;
		}

		.application-list-item .application-list-item-body .text-num-item .text-num-item-title {
			font-size: 12px;
			color: #999;
			margin-bottom: 10px;
		}

		.application-list-item .application-list-item-body .text-num-item small {
			font-size: 16px;
		}

		.application-list-item .application-list-item-tool {
			font-size: 0;
			background-color: #FAFAFA;
			border-top: 1px solid #e8e8e8;
			padding: 10px 0 5px 0;
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
		}

		.application-list-item .application-list-item-tool .application-list-item-tool-item {
			display: inline-block;
			width: 33%;
			font-size: 18px;
			text-align: center;
			color: #999;
			border-right: 1px solid #e8e8e8;
			box-sizing: border-box;
			cursor: pointer;
		}

		.application-list-item .application-list-item-tool .application-list-item-tool-item:last-child {
			border-right: none;
		}

		/** // 应用列表样式结束 */
		#test1{
			clear: both;
			text-align: left!important;
		}
	    </style>
	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
				<a href="">首页</a>
				<a><cite>倒计时</cite></a>
			</span>
			<a class="layui-btn layui-btn-small" style="float:right" onclick="location.reload()" title="刷新">
				<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
			</a>
		</div>
		<!-- 正文开始 -->
		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-header" style="padding:10px">
					<button class="layui-btn" onclick='xadmin.open("添加","{:url('add')}",650,400)'><i class="layui-icon"></i>添加</button>
				</div>
				<div class="layui-card-body">

					<div class="layui-row layui-col-space15" id="demoGrid3"></div>
					<div id="test1"></div>
				</div>
			</div>
		</div>



		<!-- 应用模板 -->
		<script type="text/html" id="demoGridItem3">
			<div class="layui-col-md3">
		        <div class="application-list-item">
		            <div class="application-list-item-header">
		                <h2>标题:{{d.name}}</h2>
		            </div>
		            <div class="application-list-item-body">
		                <div class="text-num-item">
		                    <div class="text-num-item-title">截止日期:{{d.activeNum}}</div>
		                </div>
		                <div class="text-num-item">
		                    <div class="text-num-item-title">时间段:{{d.newNum}}</div>
		                </div>
		            </div>
		            <div class="application-list-item-tool">
		                <span class="application-list-item-tool-item" lay-event="edit">
		                    <i class="layui-icon layui-icon-edit" lay-tips="编辑" lay-offset="0,-8px"></i>
		                </span>
		                <span class="application-list-item-tool-item" lay-event="seting">
		                    <i class="layui-icon layui-icon-set" lay-tips="设置" lay-offset="0,-8px"></i>
		                </span>
						<span class="application-list-item-tool-item" lay-event="delete">
						    <i class="layui-icon layui-icon-delete" lay-tips="删除" lay-offset="0,-8px"></i>
						</span>
		            </div>
		        </div>
		    </div>
		</script>

	</body>
	<script>
		layui.extend({
			dropdown: 'dropdown/dropdown',
			dataGrid: 'dataGrid/dataGrid'
		}).use(['layer', 'dataGrid','laypage','element', 'dropdown'], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var dataGrid = layui.dataGrid;
			var element = layui.element;
			var laypage = layui.laypage;
			
			
			
			laypage.render({
			  elem: 'test1',
			  count: 20, //数据总数，从服务端得到
			  layout: [ 'prev', 'page', 'next','skip', 'count','limit'],
			  jump: function(obj, first){
			    //obj包含了当前分页的所有参数，比如：
			    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
			    console.log(obj.limit); //得到每页显示的条数
			    // 应用
			    $.post("{:url('grid3')}",{limit:obj.limit,offset:obj.curr}, function(res) {
			    	var tableIns = dataGrid.render({
			    		elem: '#demoGrid3', // 容器
			    		templet: '#demoGridItem3', // 模板
			    		data: res.data,
			    		onItemClick: function(obj) { // item事件
			    			var index = obj.index + 1;
			    			layer.msg('点击了第' + index + '个', {
			    				icon: 1
			    			});
			    		},
			    		onToolBarClick: function(obj) { // toolBar事件
			    			var event = obj.event;
			    			var data = obj.data;
							console.log(data)
			    			if (event == 'edit') {
			    				layer.msg('编辑', {
			    					icon: 1
			    				});
			    			} else if (event == 'seting') {
			    				layer.open({
			    					title: "设置",
			    					type: 2,
			    					area: ['1100px', '680px'],
			    					content: "{:url('seting')}?id=" + data.id,
			    					success: function() {
			    						top.layerFrameConfig.iframeB = {
			    							info: tableIns
			    						}
			    					}
			    				});
			    			} else if (event == 'delete') {
			    				layer.msg('点击了删除', {
			    					icon: 1
			    				});
			    			}
			    		}
			    	});
			    }, 'json');
			    //首次不执行
			    if(!first){
			      //do something
			    }
			  }
			});
			
			
			
			



		});
	</script>
</html>
